/**
 * Created by liuzengrong on 2019/8/12.
 */
import React, {Component} from 'react';
import {PageHeader, message, Typography, Modal, Form, Input, Row, Col} from 'antd';
import styles from './index.less';
import axios from '@/components/Engineering/axios';
import Validator from '@/utils/Validator'
import {Link, browserHistory} from 'dva/router';

const {Paragraph} = Typography;
const FormItem = Form.Item

const productList = [
  {
    title: '进出口服务',
    // secondLevelTitle: '出口退税是指国家运用税收杠杆奖励出口的一种措施。一般分为两种',
    introduce: '洲博通外贸综合服务平台凭借自身专业能力，为客户处理应对进出口环节当中的各项繁冗复杂的问题，真正为客户实现一站式代理进出口的服务。洲博通外贸综合服务平台是在广州市成功备案的外贸综合服务企业，合法合规为客户提供代办出口退税，通关，信保，物流和协助金融等服务。同时洲博通在各个海运、空运口岸均设有成熟的操作团队，可为客户提供便捷的进口清关服务。平台可以操作的进口产品种类非常全面，尤其是对于大型机械设备，酒类，化工品有较多的成功案例',
    productGuideURL: '/service/production-guide?productName=drawback',
  },
  {
    title: '进出口贸易单证服务',
    introduce: '洲博通外贸综合服务平台专注于为客户提供进出口贸易相关单证的解决方案。其中包括为客户办理货物原产地证文件，审核信用证条款并制作交单文件，产品认证服务，大使馆加签服务，中冰、中瑞普货CIQ等证书服务。洲博通承诺所有证书均通过官方渠道办理，并且时效快，效率高，帮助客户货通全球，畅行无阻',
    productGuideURL: '/manage/service/credit',
  },
  {
    title: '在线制作报关资料',
    introduce: '洲博通自主研发的实用小工具，所有外贸人均可终身免费使用的小程序。帮助客户方便、快捷、高效地制作和管理报关数据，一键即可生成报关资料，同时支持模版导入数据和导出电子版资料。主要方便客户管理出口产品信息，境外贸易商信息，开票人信息以及报关抬头信息。助力系统化管理订单数据，降低单证差错，提升工作效率',
    productGuideURL: '/manage/service/customsInfoGenerateManagement/customsInfoGenerate',
  },
  {
    title: '市场采购出口服务',
    introduce: '洲博通外贸综合服务平台是成功获得政府批准的市场采购出口资质的公司。市场采购在经认定的市场集聚区内采购，每票货值不超过15万美金，免征不退（不需要取得增值税发票）的贸易方式，海关监管方式为1039。通过市场采购报关出口可以合法收取外汇，极大简化了出口贸易流程，特别适合广州本地的小商品出口，特别适用于外商在广州零散采购后批量出口的贸易模式',
    productGuideURL: '/service/production-guide?productName=marketPurchase',
  },
]


class Service extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      businessName: '',
    };
    this.ACJSESSIONID = sessionStorage.getItem('ACJSESSIONID')
  }


  handleSubmit = () => {
    this.props.form.validateFields((err: any, values: any) => {
      if (err) return message.error("填写的参数不完整");
      values.type = this.state.productType;
      // this.ACJSESSIONID ? null : values.code = LESSEE_CODE;
      values.code = LESSEE_CODE

      axios
        .ajax({url: `${MC_PATH}/api/web/apply`, params: {...values}}, 'post')
        .then(res => {
          if (res && res.resultCode == 'ok') {
            message.success('您已经提交成功，请耐心等待，我们会尽快联系您，谢谢！');
            this.props.form.resetFields()
            this.setState({productvisable: false})
          } else if (res.errMessage) {
            message.error(res.content || res.errMessage);
          }
        });

    })

  }


  render() {
    const {getFieldDecorator} = this.props.form
    const ProductContent = (props) => {
      return <div className="content">
        <Paragraph>
          {props.secondLevelTitle}
        </Paragraph>
        {props.introduce ? <Paragraph>
          {props.introduce}
        </Paragraph> : null}
        <p className={styles.contentLink}>
          <a onClick={() => {
            this.setState({productvisable: true, businessName: props.title, productType: 2, productModalTitle: '立即咨询'})
          }}>
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
              alt="start"
            />
            立即咨询
          </a>

          <a onClick={() => {
            this.setState({productvisable: true, businessName: props.title, productType: 1, productModalTitle: '立即下单'})
          }}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info"/>
            立即下单
          </a>

          <Link to={props.productGuideURL || ''}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc"/>
            产品指南
          </Link>
        </p>
      </div>
    };

    const extraContent = (
      <img
        src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
        alt="content"
      />
    );

    const formItemLayout = {
      labelCol: {
        xs: {span: 6},


      },
      wrapperCol: {
        xs: {span: 18},

      },
    };


    return (
      <>
        <div style={{maxWidth: '1200px', margin: 'auto', background: '#fff', paddingTop: 80, paddingBottom: 80}}>
          {productList.map(item => {
            return <PageHeader title={item.title}>
              <div className={styles.wrap}>
                <div className={styles.content}><ProductContent {...item} /></div>
                <div className={styles.extraContent}>{extraContent}</div>
              </div>
            </PageHeader>
          })}
        </div>

        <Modal
          title={this.state.productModalTitle || false}
          width={700}
          closable={false}
          visible={this.state.productvisable}
          onOk={this.handleSubmit}
          onCancel={() => {
            this.setState({productvisable: false});
            this.props.form.resetFields()
          }}
        >
          <Form>
            <div style={{marginBottom: 50}}>感谢您关注洲博通外贸综合服务平台！您可以直接拨打我们的客服电话400-189-2323咨询下单，也可以在下方留下您的联系方式，我们会尽快给您回电。
            </div>
            <Row gutter={16}>
              <Col span={12}>
                <FormItem label="业务类型" {...formItemLayout}>
                  {getFieldDecorator('businessName', {
                    initialValue: this.state.businessName,
                    rules: [
                      {required: true, message: '业务类型不能为空'},
                    ],
                  })(<Input disabled>
                  </Input>)}
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem label="联系人" {...formItemLayout}>
                  {getFieldDecorator('contacts', {
                    initialValue: '',
                    rules: [
                      {required: true, message: '联系人不能为空'},
                      {min: 2, max: 6, message: '请输入正确的联系人'}
                    ],
                  })(<Input>
                  </Input>)}
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {getFieldDecorator('phone', {
                    initialValue: '',
                    rules: [
                      {required: true, message: '联系电话不能为空'},
                      {pattern: Validator.mobile, message: '联系电话格式有误'},
                    ],
                  })(<Input>
                  </Input>)}
                </FormItem>
              </Col>

              {/*<Col span={12}>*/}
              {/*  <FormItem label="租户编码" {...formItemLayout}>*/}
              {/*    {getFieldDecorator('code', {*/}
              {/*      initialValue: '',*/}
              {/*      rules: [*/}
              {/*        {required: true, message: '租户编码不能为空'},*/}
              {/*      ],*/}
              {/*    })(<Input>*/}
              {/*    </Input>)}*/}
              {/*  </FormItem>*/}
              {/*</Col>*/}


            </Row>
          </Form>
        </Modal>
      </>
    );
  }
}


export default Form.create({name: 'Service'})(Service)
